<template>
  <BaseCard>
    <!-- 标题 + 操作按钮 -->
    <el-descriptions border :column="4" direction="vertical" :title="title">
      <template #extra>
        <el-button v-if="modelValue" size="small" v-for="button in modelValue.buttons" :key="button.name"
          @click="buttonClick(button)" :type="button.buttonClass || 'primary'">
          {{ button.name }}
        </el-button>
      </template>
    </el-descriptions>

    <slot />
  </BaseCard>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { TypeUtils } from "/@/utils/TypeUtils";

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  title: {

  }
})

</script>

<style scoped>
.grid-layout {
  display: grid;
  gap: 12px 16px;
  /* 强制列宽等分 */
  grid-template-columns: repeat(3, 1fr);
}

.grid-cell {
  display: flex;
  align-items: center;
  min-height: 40px;
  /* 统一最小行高 */
}

.label {
  font-weight: bold;
  color: #666;
  padding-right: 10px;
  display: inline-block;
  text-align: right;
  line-height: 1.5;
  /* 文本行高统一 */
}

.value {
  flex: 1;
  color: #333;
  line-height: 1.5;
  /* 文本行高统一 */
}

.el-button {
  margin-left: 8px;
}

.small {
  width: 64px;
}
</style>
